@import "../commonFunc";

.user_page_template {
    @include widthHeight(100vw, 100vh);
    background-image: url('../../images/home_bg.png');

    .container_panel {
        @include position(relative);
        @include widthHeight(px2rem(1200), px2rem(720));
        @include bgColor;
        box-shadow: 0 0 px2rem(10) 0 rgba(0, 0, 0, 0.35);
        // top: calc((100% - 693px) / 2);
        // left: calc((100% - 1200px) / 2);
        padding: px2rem(51) px2rem(300) 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        // margin: px2rem(300) auto;

        .content_section {

            .logo_section {
                h1 {
                    @include color(#AF8961);
                    @include fontSize(px2rem(47));
                    height: px2rem(55);
                    @include displayFlex;
                    @include fZSH;
                }

                h5 {
                    margin-top: px2rem(13);
                    @include color(#AF8961);
                    @include fontSize(px2rem(23));
                    height: px2rem(22);
                    @include displayFlex;
                    font-weight: bold;
                    @include fZSH;
                }
            }

            .ant-form {
                &.registerForm {
                    margin-top: px2rem(20);

                    .ant-form-item {
                        margin-bottom: px2rem(30);

                        .tel_style {
                            input {
                                border-right: none;
                                border-radius: px2rem(2) 0 0 px2rem(2);
                            }

                            button {
                                border-left: none;
                                border-radius: 0 px2rem(2) px2rem(2) 0;

                                span {
                                    @include fZSH;
                                    @include fontSize(px2rem(16))
                                }
                            }
                        }
                    }

                    .submit_btn {
                        margin-bottom: px2rem(16);
                    }
                }

                &.loginForm {
                    margin-top: px2rem(56);


                    .ant-form-item {
                        margin-bottom: px2rem(30);

                        &.we_chart_login {
                            height: px2rem(385);
                            margin-bottom: px2rem(20);

                            .ant-form-item-control-input {
                                .ant-form-item-control-input-content {
                                    @include widthHeight(100%);
                                }

                                @include widthHeight(100%);
                            }

                            .WeChart {
                                @include widthHeight(100%);

                                iframe {
                                    @include widthHeight(100% !important);
                                }
                            }
                        }
                    }

                    .ant-form-item-with-help {
                        margin-bottom: px2rem(30);
                    }

                    input {
                        @include lineHeight(px2rem(50));
                        border-left: none;
                        box-shadow: none;
                    }

                    .ant-input-group-addon {
                        width: px2rem(50);
                        @include fontSize(px2rem(24));
                        padding: 0;
                        @include color(#AF8961);

                        .anticon {
                            height: px2rem(20);
                            @include displayFlex;
                            border-right: 1px solid #000000;
                        }
                    }

                    .ant-input-affix-wrapper-lg {
                        padding: 0 px2rem(11);
                        border-left: none;
                        box-shadow: none;

                        input {
                            @include lineHeight(px2rem(48));
                        }
                    }

                    .slide_validate {
                        margin-bottom: px2rem(19);

                    }

                    .ant-checkbox-wrapper {
                        @include color(#000000);
                        @include fontSize(px2rem(16));

                        .ant-checkbox {
                            top: 0;
                        }
                    }

                    .checked_pwd {
                        margin-bottom: px2rem(48);
                    }

                    .submit_btn {
                        height: px2rem(60);
                        margin-bottom: px2rem(19);
                    }

                    .fast_login {
                        @include displayFlex;
                        justify-content: flex-end;
                        @include color(#000);
                        height: auto;

                        > span {
                            @include displayFlex;
                        }

                        .anticon {
                            @include widthHeight(px2rem(44));
                            @include bgColor(#F5F5F5);
                            border-radius: 50%;
                            margin-right: px2rem(9);
                            @include displayFlex;
                            @include fontSize(px2rem(35))
                        }
                    }
                }

                .ant-form-item-explain.ant-form-item-explain-error {
                    @include position;

                    div {
                        @include fontSize(px2rem(14))
                    }
                }

                .ant-form-item-label {
                    label {
                        @include color(#957A66);
                        @include fontSize(px2rem(18));
                        @include fZSH;
                    }
                }

                .submit_btn {
                    width: 100%;
                    height: px2rem(50);
                    @include fontSize(px2rem(20));
                    margin-bottom: px2rem(26);
                }

                input {
                    @include fZSH;
                    @include fontSize(px2rem(16))
                }

                .fast_login {
                    height: px2rem(18);
                    @include displayFlex;
                    justify-content: flex-end;
                    @include fZSH;
                    @include fontSize(px2rem(16));
                    @include color(#957A66);

                    span {
                        text-decoration: underline;
                        @include fZSH;
                        cursor: pointer;

                        &:hover {
                            @include color($defaultColor);
                        }
                    }
                }
            }
        }

        .tip_picture {
            @include position;
            @include trbl(0, 0, 0, '');
            width: px2rem(400);
            // background-image: url('../../images/user/user_bg.png');
            background-repeat: no-repeat;
            background-size: cover;
            box-shadow: 0 0 px2rem(10) 0 rgba(0, 0, 0, 0.35);
            padding: px2rem(58) px2rem(24) 0;
            @include fZSH;

            &.active {
                padding: px2rem(95) px2rem(55) 0;

                h1 {
                    @include fontSize(px2rem(60));
                    height: px2rem(46);
                    margin-bottom: px2rem(38);
                }

                p {
                    margin-bottom: px2rem(59);
                }
            }

            h1 {
                @include fontSize(px2rem(44));
                height: px2rem(42);
                @include color(white);
                @include displayFlex;
                justify-content: flex-start;
                margin-bottom: px2rem(28);
                @include fZSH;
            }

            h4 {
                @include color(white);
                @include fontSize(px2rem(20));
                margin-bottom: px2rem(23);
                @include fZSH;
                text-align: center;
            }

            p {
                @include color(white);
                @include fontSize(px2rem(20));
                @include displayFlex;
                margin-bottom: px2rem(43);
                text-align: center;
                @include fZSH;
            }

            .register_btn {
                @include widthHeight(px2rem(160), px2rem(40));
                @include displayFlex;
                border: px2rem(1) solid white;
                border-radius: px2rem(20);
                margin-left: calc((100% - 160px) / 2);
                @include color(white);
                @include fontSize(px2rem(20));
                cursor: pointer;
                @include fZSH;

                &:hover {
                    opacity: .85;
                }
            }
        }
    }

    .footer_style {
        @include position;
        @include trbl('', 0, 0, 0);
        height: px2rem(60);
        background-image: url('../../images/user/login_line.png');
        background-repeat: repeat-x;
    }
}